<template>
	<view class="wrap">
			<u-row gutter="16">
				<u-col span="5" offset="0">
					<view class="demo-layout bg-purple card">
						<navigator class="title" url="../setmeal/setmeal" open-type="navigate">体检预约</navigator>
						<navigator url="../setmeal/setmeal" open-type="navigate" class="litleTiltle">实时预约</navigator>
					</view>
				</u-col>
				<u-col span="5" offset="1">
					<view class="demo-layout bg-purple-light">
						<text class="title">报告查询</text>
						<text class="litleTiltle">一键查询</text>
					</view>
				</u-col>
			</u-row>
			<u-row gutter="16">
				<u-col span="5" offset="0">
					<view class="demo-layout bg-purple">
						<text class="title">健康评估</text>
						<text class="litleTiltle">了解自身健康</text>
					</view>
				</u-col>
				<u-col span="5" offset="1">
					<view class="demo-layout bg-purple">
						<text class="title">健康干预</text>
						<text class="litleTiltle">采集状况</text>
					</view>
				</u-col>
			</u-row>
			<u-row gutter="16">
				<u-col span="5" offset="0">
					<view class="demo-layout bg-purple">
						<text class="title">健康档案</text>
						<text class="litleTiltle">掌上查询</text>
					</view>
				</u-col>
				<u-col span="5" offset="1">
					<view class="demo-layout bg-purple">
						<text class="title">健康咨询</text>
						<text class="litleTiltle">咨询一览</text>
					</view>
				</u-col>
			</u-row>
		</view>
</template>

<script>
	export default {
		name:"navCards"
	}
</script>

<style scoped>
	.wrap {
			padding: 24rpx;
		}
		.title{
			position: relative;
			top: 20rpx;
			left: 30rpx;
			font-size: 35rpx;
			display: block;
		}
		.litleTiltle{
			position: relative;
			top: 30rpx;
			left: 30rpx;
			font-size: 20rpx;
			color: #bfaf86;
		}
		.card {
			 
		}
	
		.u-row {
			margin: 40rpx 0;
		}
	
		.demo-layout {
			width: 300rpx;
			height: 140rpx;
			border-radius: 18rpx;
		}
	
		.bg-purple {
			background: #d3dce6;
		}
	
		.bg-purple-light {
			background: #e5e9f2;
		}
	
		.bg-purple-dark {
			background: #99a9bf;
		}
</style>